
<template>
  <view style="width: 100%; height: 350rpx">
    <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" :canvas2d="true" :canvasId="canvasId"/>
  </view>
</template>
<script>
export default {
  data() {
    return {
      chartData: {},
      opts: {
        color: ["#a743ea", "#eb9327", "#eadb36", "#0cd689"],
        fontColor: "#c5ddf5", // 全局默认字体颜色，16进制颜色格式
        padding: [5, 5, 5, 5],
        rotate: false, //横屏模式
        animation: true, // 是否动画展示图表
        dataLabel: true, // 是否显示图表区域内数据点上方的数据文案
        legend: {
          show: true,
          position: "right", //图例相对画布的显示位置，可选值：'bottom','top','left','right'
          float: "center", // 图例位置对齐方向，可选值：'center','left','right','top','bottom'
          padding: 5, //图例内填充边距
          margin: 5, // 图例外侧填充边距
          backgroundColor: "rgba(0,0,0,0)", // 图例背景颜色
          borderColor: "rgba(0,0,0,0)", // 图例边框颜色
          borderWidth: 0, // 图例边框线宽
          fontSize: 13, // 字体大小
          fontColor: "#c5ddf5", // 字体颜色
          lineHeight: 11, // 字体行高
          hiddenColor: "#CECECE", // 点击隐藏时图例标识及文字颜色
          itemGap: 15, // 各个分类（类别）之间的间隔
        },
        extra: {
          pie: {
            activeOpacity: 0.5, // 启用Tooltip点击时，突出部分的透明度
            activeRadius: 10, // 启用Tooltip点击时，突出部分的宽度（最大值不得超过labelWidth）
            offsetAngle: 0, // 起始角度偏移度数，顺时针方向，起点为3点钟位置为0度（比如要设置起点为12点钟位置，即逆时针偏移90度，传入-90即可）
            // customRadius: 0, // 自定义半径（一般不需要传值，饼图会自动计算半径，自定义半径可能会导致显示图表显示不全）
            labelWidth: 10, // 数据标签到饼图外圆连线的长度
            border: true, // 是否绘制各类别中间的分割线
            borderWidth: 0, // 分割线的宽度
            borderColor: "#fff", // 分割线的颜色
            linearType: "none", // 渐变类型，可选值："none"关闭渐变,"custom"开启渐变
            // customColor: [], //自定义渐变颜色，数组类型对应series的数组长度以匹配不同series颜色的不同配色方案，例如["#FA7D8D", "#EB88E2"]
          },
        },
      },
    };
  },
  props: {
    pieData: {
      type: Array,
      default: () => [
        {
          name: "IT电能",
          value: 10,
        },
        {
          name: "末端电能",
          value: 20,
        },
        {
          name: "冷源电能",
          value: 30,
        },
        {
          name: "其他电能",
          value: 40,
        },
		{
		  name: "其他电能g",
		  value: 50,
		},        {
          name: "其他电能fd",
          value: 60,
        },        {
          name: "其他电能df",
          value: 70,
        },        {
          name: "其他电能td",
          value: 80,
        },        {
          name: "其他电能zsx",
          value: 90,
        },
		{
		  name: "其他电能",
		  value: 90,
		}
      ],
    },
  },
  watch: {
    pieData: {
      handler() {
        this.setChartData();
      },
      immediate: true,
    },
  },
  methods: {
    // 设置数据 渲染图表
    setChartData() {
      this.chartData = {
        series: [
          {
            data: this.pieData,
          },
        ],
      };
    },
  },
};
</script>